<template>
  <div class="wik-date-picker">
    <el-date-picker
      v-model="selectedDates"
      type="date"
      placeholder="选择日期"
      format="YYYY-MM-DD HH:mm:ss"
      value-format="YYYY-MM-DD HH:mm:ss"
      ref="datePicker"
      :teleported="false"
      :visible="true"
      :disabled-date="attribute.disabledDate"
      class="wik-date-picker-custom"
      @change="handleDateChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";

const emits = defineEmits(["close"]);
const datePicker = ref<HTMLElement | null>(null);
const props = defineProps({
  selectedDate: {
    type: String,
    required: true
  },
  handleDateChange: {
    type: Function,
    required: true
  },
  attribute: {
    type: Object,
    default: () => ({})
  }
});
const selectedDates = ref(props.selectedDate);
const handleDateChange = (date: string) => {
  props.handleDateChange(date);
  emits("close");
};
onMounted(() => {
  setTimeout(() => {
    datePicker.value?.focus();
  }, 100);
});
</script>
<style lang="scss" scoped>
/* 隐藏日期选择控件 */
.wik-date-picker {
  width: 392px;
  height: 326px;
  background: #ffffff;
  will-change: transform;
  :deep(.wik-date-picker-custom) {
    z-index: -1;
    height: 0;
    opacity: 0;
  }
  :deep(.el-picker__popper) {
    position: relative !important;
    inset: -16px 0 0 !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    transition: none !important;
    .el-date-picker {
      width: 100% !important;
      height: 100% !important;
      .el-picker-panel__content {
        width: 100% !important;
        margin: 0 !important;
      }
    }
    .el-popper__arrow {
      display: none;
    }
  }
}
</style>
